<ng-container *ngIf="bookDetails$ | async as book; else noBooksFound">
  <mat-card class="mt-4">
    <mat-card-header class="mat-elevation-z2 custom-card-header">
      <mat-card-title class="mat-h1">Book Details</mat-card-title>
    </mat-card-header>
    <mat-card-content class="row g-0 d-flex p-3">
      <div class="col-md-3 col-sm-12">
        <img
          mat-card-image
          src="/Upload/{{ book.coverFileName }}"
          alt="No image available"
        />
      </div>
      <div
        class="col-md-5 col-sm-12 d-flex flex-column justify-content-between"
      >
        <table class="table table-lg">
          <tbody>
            <tr>
              <td><strong>Title</strong></td>
              <td>{{ book.title }}</td>
            </tr>
            <tr>
              <td><strong>Author</strong></td>
              <td>{{ book.author }}</td>
            </tr>
            <tr>
              <td><strong>Category</strong></td>
              <td>{{ book.category }}</td>
            </tr>
            <tr>
              <td><strong>Price</strong></td>
              <td>{{ book.price | currency : "INR" }}</td>
            </tr>
          </tbody>
        </table>
        <div>
          <app-addtocart [bookId]="book.bookId"></app-addtocart>
          <app-addtowishlist
            *ngIf="(userData$ | async).isLoggedIn"
            [bookId]="book.bookId"
            [showButton]="true"
            class="ms-2"
          >
          </app-addtowishlist>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
  <app-book-summary [bookTitle]="book.title"></app-book-summary>
  <app-similarbooks></app-similarbooks>
</ng-container>
<ng-template #noBooksFound>
  <div class="d-flex flex-column align-items-center mt-4">
    <div>
      <h1 class="display-4">No books found.</h1>
    </div>
    <div>
      <button mat-raised-button color="primary" [routerLink]="['/']">
        Back to Home
      </button>
    </div>
  </div>
</ng-template>
